<template>
  <div class="addword">
    <el-dialog class = "trans_dialog" title="添加单词" :visible.sync="dialogFormVisible" style="margin: 0 auto">
      <el-form :model="form">
        <div :class="{hide_input:!hide_input}" style="font-size: 25px;margin: 0 auto 10px auto;font-weight: bold">
          {{word_1}}
        </div>
        <div class="src_input_wrapper" style="margin-bottom: 10px;" :class="{hide_input:hide_input}">
          <el-input placeholder = '请输入单词' clearable v-model = 'word_1'></el-input>
        </div>
        <div :class="{hide_input:!hide_input}" style="font-size: 25px;margin: 0 auto 10px auto;font-weight: bold">
          {{tgt}}
        </div>
        <div :class="{hide_input:hide_input}" class="tgt_input_wrapper" style="margin-bottom: 10px;">
          <el-input placeholder = '请输入翻译' clearable v-model = 'tgt'></el-input>
        </div>
        <el-form-item label="熟练度" :label-width="'70px'">
          <el-select v-model="form.cmd" placeholder="请选择熟练度">
            <el-option :label="item" :value="item" v-for="item in cmds" :key="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="重要度" :label-width="'70px'">
          <el-select v-model="form.imp" placeholder="请选择活动区域">
            <el-option :label="item" :value="item" v-for="item in imps" :key="item"></el-option>
<!--            <el-option label="不重要" value="不重要"></el-option>-->
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addWord">确 定</el-button>
      </div>
      <el-select size="medium" class="feature_select" style="width: 250px;"
        v-model="features" multiple filterable allow-create default-first-option placeholder="请选择文章标签">
        <el-option v-for="item in options" :key="item" :label="item" :value="item">
        </el-option>
      </el-select>
      <div class="myadd_feature_wrapper" style="display: flex;margin: 10px auto;padding-left: 5px;">
        <el-input placeholder="请输入内容" v-model="input_feature" clearable></el-input>
        <el-button circle type="primary" @click="addMyFeature" icon="el-icon-plus" style="margin: 0 10px;font-weight: bold;"></el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    import {postRequest} from "../../utils/api";
    import {strsutils} from "../../utils/strutils";

    const baseurl = strsutils.baseurl
    export default {
      name: "AddWord",
      props: ['word_1', 'tgt', 'show_int', 'hide_input'],
      data(){
        return {
          // hide_input: true,
          word_1: '',
          tgt: '',
          cmds: strsutils.cmds,
          imps: strsutils.imps,
          input_feature: '',
          features: [],
          options: strsutils.sys_features,
          dialogFormVisible: false,
          form: {
            name: '',
            cmd: '熟练',
            imp:'重要',
            delivery: false,
          },
        }
      },
      methods: {
        addMyFeature(){
          if(this.input_feature!=''){
            console.debug(this.features)
            for (let i = 0;i < this.features.length;i++){
              var item = this.features[i]
              if(item == this.input_feature){
                return
              }
            }
            this.features.push(this.input_feature)
            this.input_feature = ''
          }
        },
        addWord(){
          // if(this.word_1 == null || this.tgt == null){
          if((this.word_1 == null) || (this.tgt == null)){
            console.debug("fail 表单中的src（word_1）和tgt:"+this.word_1+"--"+this.tgt)
            return
          }
          if((this.word_1 == '') || (this.tgt == '')){
            console.debug("fail 表单中的src（word_1）和tgt:"+this.word_1+"--"+this.tgt)
            return
          }
          console.debug("success 表单中的src（word_1）和tgt:"+this.word_1+"--"+this.tgt)
          // console.debug("表单中的src（word_1）和tgt:"+this.word_1+"--"+this.tgt)
          const _this = this
          let param = {
            src: this.word_1,
            tgt: this.tgt,
            userid: window.localStorage.getItem('userid'),
            cmd: this.form.cmd,
            imp: this.form.imp,
            feature_strs: this.features
          }
          this.dialogFormVisible = false
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          postRequest(baseurl+'/addWord', param).then(function (res) {
            console.debug("访问服务器成功")
            if (res.data){
              _this.$message.success("添加单词成功")
            }else{
              _this.$message.error("添加单词失败")
            }
            loading.close()
          }).catch(function (err) {
            console.debug('add word fail '+err)
            _this.$message.error("访问服务器失败")
            loading.close()
          })
        },
      },
      computed: {
      },
      watch:{
        show_int: function (newvalue, oldvalue) {
          this.dialogFormVisible = true
        }
      }
    }
</script>
<style>
</style>

<style scoped>
  .hide_input{display: none}
</style>
